<template>
	<div class="login">
		<view class="register"></view>
		<view>
			<input class="inputStyle" placeholder="用户名" v-model="user.sno" />
		</view>
		<view>
			<input class="inputStyle" type="password" placeholder="设置密码" v-model="user.password" />
		</view>
		<view>
			<input class="inputStyle" type="password" placeholder="确认密码" v-model="user.password2" />
			<text v-if="user.password !== user.password2" class="alertText">前后密码不一致！</text>
		</view>
		<view>
			<button :type="isType" @tap="sendInfo" :disabled="isDisabled" class="btnSend">
				{{text}}
			</button>
			<input class="inputStyle" type="text" @confirm="sendInfo" v-model="PhoneNumber" placeholder="请输入手机号"/>
			<text v-if="isShow" class="alertText">请输入有效的手机号码！</text>
		</view>
		<view>
			<input class="inputStyle" type="text" placeholder="请输入验证码" v-model="user.num" />
		</view>
		<view>
			<!-- <view class="floatLeft">当前位置</view>
			<map class="map" :latitude="latitude" :longitude="longitude" :markers="covers">
			</map> -->
		</view>
		<view>
			<button type="default" form-type="submit" class="loginBtn" style="margin-top:40px" @click="msg">完成并登录</button>
		</view>
		<view class="registerFootTextvalue">
			<radio value="r1" :checked="checkedR1" @click="checkedMethods"/>我同意《
			<text class="linkText">服务协议</text>》和《
			<text class="linkText">隐私政策</text>》
		</view>
	</div>
</template>

<script>
	const {getVCode,register} = require('../../utils/admin.js')
	export default {
		data() {
			return {
				checkedR1:false,
				PhoneNumber:'',//判断用户输入
				text: '发送',
				isDisabled: false,
				isType: 'primary',//判读按钮的颜色
				isShow:false,//是否显示红色文本提醒
				time: 60,
				user:{
					sno:'',
					num:'',
					username:'',
					password:'',
					password2:''
				},
				id:0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.9,
				longitude: 116.4,
				// covers: [{
				// 	latitude: 39.909,
				// 	longitude: 116.39742,
				// 	iconPath: '../../../static/location.png'
				// }, {
				// 	latitude: 39.90,
				// 	longitude: 116.39,
				// 	iconPath: '../../../static/location.png'
				// }]
			}
		},
		methods:{
			/**
			 * 点击“我同意”
			 */
			checkedMethods(){
				this.checkedR1 = !this.checkedR1;
			},
			/**
			 * 验证码
			 */
			sendInfo() {
				if(this.PhoneNumber != Number && this.PhoneNumber.length != 11){//判断手机输入条件
					this.isShow = true//显示红色文本
				}
				else {
					this.isShow = false//用户输入重新输入正确的手机号后，红色文本提醒信息消除
					getVCode().then(data=>{
						uni.showModal({
							content: data,
							showCancel: false
						});
					})
					let time = this.time
					this.isDisabled = true
					this.isType = 'default'
					const timer = setInterval(() => {
						if (time == 0) {
							clearInterval(timer)//清除定时器后，以下都是恢复原始状态
							this.isDisabled = false
							this.isType = 'primary'
							this.text = '发送验证码'
							time = this.time
						} else {
							this.text = `${time}秒`
							time-- //倒计时的实现，利用递减
						}
					}, 1000)
				}
			},
			/**
			 * 注册
			 */
			register(){
				uni.navigateTo({
					url: 'register'
				});
			},
			/**
			 * 忘记密码
			 */
			forget(){
				uni.navigateTo({
					url: 'forget'
				});
			},
			/**
			 * 点击“完成并登录”
			 */
			msg(){
				if(this.checkedR1 === false){
					uni.showModal({
						content: '同意协议后才能继续哦',
						showCancel: false
					});
				}else{
					uni.navigateTo({
						url: 'msg'
					});
					// uni.getLocation({
					//     type: 'wgs84',
					//     success: function (res) {
					// 		if(this.longitude === res.longitude && this.latitude === res.latitude){
					// 			uni.navigateTo({
					// 				url: 'msg'
					// 			});
					// 		}else{
					// 			uni.showModal({
					// 				content: '不在规定区域内，不能注册！',
					// 				showCancel: false
					// 			});
					// 		}
					//     }
					// });
				}
			}
		}
	}
</script>

<style scoped src="../../static/css/login.css"></style>
<style scoped>
	.btnSend{
		background-color: #2BC17B;
		width: 100px;
		height: 40px;
		float: right;
		position: relative;
		top:-10px;
	}
	.alertText{
		color: red;
		display: flex;
		justify-content: center;
	}
</style>